<template>
	<view style="background-image: linear-gradient(to bottom, #d9d9d9 0%, black 100%);height: 100%;">

		<!-- 状态栏 -->
		<u-navbar :is-back="false" title=" " :background="sc.navBackground" :border-bottom="false">
			<view class="slot-wrap">
				<!-- 搜索框 -->
				<u-search class="search" placeholder="剑未配妥，出门已是江湖" v-model="sc.sckey" :show-action="sc.showAction"
					:action-style="sc.youStyle" :animation="sc.animation" :margin="sc.margin"
					@blur="sc.sckey='' ,scMaask=false" @focus="scMaask=true" @custom="u_sc_go" @search="u_sc_go"
					@change="u_sc_lianxiang"></u-search>
			</view>
		</u-navbar>



		<view class="content" style="margin-top: 20rpx;">
			<!-- 正文内容 -->
			<!-- 轮播图 -->
			<view class="">
				<u-swiper :list="swiper_list" mode="rect" indicator-pos="bottomRight" effect3d="true"
					bg-color="transparent"></u-swiper>
			</view>
			<!-- 空位符 -->
			<view style="margin-top: 10px;"></view>

			<!-- 热门推荐 -->
			<view class="hot">
				<view class="left">
					<image src="../../static/hot1.png" mode="widthFix">热门电影</image>
				</view>
				<view class="">
					查看更多>>
				</view>
			</view>
			<!-- 热门推荐列表 -->
			<view class="hotCars">
				<view class="tags" style="position: relative;" data-content="豆瓣指数 6.7">
					<!-- 					<image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						mode="widthFix"></image> -->
					<u-image src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2628440875.webp"
						:fade="true" :lazy-load="true" duration="450" mode="widthFix" :shape="square" :border-radius="10">
						<u-loading slot="loading"></u-loading></u-image>
					<text class="title">刺杀小说家</text>
				</view>
				<view class="tags" style="position: relative;" data-content="豆瓣指数 7.0">
					<!-- 					<image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						mode="widthFix"></image> -->
					<u-image src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2630463690.webp"
						:fade="true" :lazy-load="true" duration="450" mode="widthFix" :shape="square" :border-radius="10">
						<u-loading slot="loading"></u-loading></u-image>
					<text class="title">我的姐姐</text>
				</view>
				<view class="tags" style="position: relative;" data-content="豆瓣指数 7.6">
					<!-- 					<image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						mode="widthFix"></image> -->
					<u-image src="https://img1.doubanio.com/view/photo/m/public/p2640044329.webp"
						:fade="true" :lazy-load="true" duration="450" mode="widthFix" :shape="square" :border-radius="10">
						<u-loading slot="loading"></u-loading></u-image>
					<text class="title">悬崖之上</text>
				</view>
				<view class="tags" style="position: relative;" data-content="豆瓣指数 5.5">
					<!-- 					<image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						mode="widthFix"></image> -->
					<u-image src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2629260713.webp"
						:fade="true" :lazy-load="true" duration="450" mode="widthFix" :shape="square" :border-radius="10">
						<u-loading slot="loading"></u-loading></u-image>
					<text class="title">侍神令</text>
				</view>
				<view class="tags" style="position: relative;" data-content="卢卡斯的积分">
					<!-- 					<image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						mode="widthFix"></image> -->
					<u-image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						:fade="true" :lazy-load="true" duration="450" mode="widthFix" :shape="square" :border-radius="10">
						<u-loading slot="loading"></u-loading></u-image>
					<text class="title">你好,李焕英</text>
				</view>
				<view class="tags" style="position: relative;" data-content="卢卡斯的积分">
					<!-- 					<image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						mode="widthFix"></image> -->
					<u-image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						:fade="true" :lazy-load="true" duration="450" mode="widthFix" :shape="square" :border-radius="10">
						<u-loading slot="loading"></u-loading></u-image>
					<text class="title">你好,李焕英</text>
				</view>

			</view>

			<view class="hot">
				<view class="left">
					<image src="../../static/hot1.png" mode="widthFix">热门电视剧</image>
				</view>
				<view class="">
					查看更多>>
				</view>
			</view>
			<!-- 热门推荐列表 -->
			<view class="hotCars">
				<view class="tags" style="position: relative;" data-content="卢卡斯的积分">
					<!-- 					<image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						mode="widthFix"></image> -->
					<u-image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						:fade="true" :lazy-load="true" duration="450" mode="widthFix" :shape="square" :border-radius="10">
						<u-loading slot="loading"></u-loading></u-image>
					<text class="title">你好,李焕英</text>
				</view>
				<view class="tags" style="position: relative;" data-content="卢卡斯的积分">
					<!-- 					<image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						mode="widthFix"></image> -->
					<u-image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						:fade="true" :lazy-load="true" duration="450" mode="widthFix" :shape="square" :border-radius="10">
						<u-loading slot="loading"></u-loading></u-image>
					<text class="title">你好,李焕英</text>
				</view>
				<view class="tags" style="position: relative;" data-content="卢卡斯的积分">
					<!-- 					<image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						mode="widthFix"></image> -->
					<u-image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						:fade="true" :lazy-load="true" duration="450" mode="widthFix" :shape="square" :border-radius="10">
						<u-loading slot="loading"></u-loading></u-image>
					<text class="title">你好,李焕英</text>
				</view>
				<view class="tags" style="position: relative;" data-content="卢卡斯的积分">
					<!-- 					<image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						mode="widthFix"></image> -->
					<u-image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						:fade="true" :lazy-load="true" duration="450" mode="widthFix" :shape="square" :border-radius="10">
						<u-loading slot="loading"></u-loading></u-image>
					<text class="title">你好,李焕英</text>
				</view>
				<view class="tags" style="position: relative;" data-content="卢卡斯的积分">
					<!-- 					<image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						mode="widthFix"></image> -->
					<u-image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						:fade="true" :lazy-load="true" duration="450" mode="widthFix" :shape="square" :border-radius="10">
						<u-loading slot="loading"></u-loading></u-image>
					<text class="title">你好,李焕英</text>
				</view>
				<view class="tags" style="position: relative;" data-content="卢卡斯的积分">
					<!-- 					<image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						mode="widthFix"></image> -->
					<u-image src="https://p3-tt.byteimg.com/large/compass/75bfdee1c10b42cb842c4e676c6b5376.awebp"
						:fade="true" :lazy-load="true" duration="450" mode="widthFix" :shape="square" :border-radius="10">
						<u-loading slot="loading"></u-loading></u-image>
					<text class="title">你好,李焕英</text>
				</view>

			</view>
		</view>



		<!-- 搜索框遮罩层 -->
		<u-mask :show="scMaask" :duration="400" :zoom="false" :custom-style="{background: 'rgba(0, 0, 0, 0.7)'}"
			z-index="979" :mask-click-able="true" @click="sc_mask">

			<!-- 遮罩层显示内容 -->
			<view class="sc-pop" :style="{marginTop: customBarH + 10 + 'px'}" style="z-index: 981;">
				<!-- 搜索记录&热门搜索 -->
				<view class="" v-if="!sc_lianx.length>0">
					<view class="u-font-xl" v-if="searchHistory.length>0">搜索历史:</view>
					<view class="u-font-sm" v-for="(item,index) in searchHistory" :key="index">
						<u-tag @click="u_sc_go(item)" class="tag" :text="item" mode="dark" shape="circle" type="info" />
					</view>
					<view class="u-font-xl">热门搜索:</view>
					<view class="u-font-sm">
						<u-tag class="tag" @click="u_sc_go('item')" text="签的边框颜色" mode="dark" shape="circle"
							type="info" />
					</view>
				</view>
				<!-- 搜索联想 -->
				<u-cell-group :border="false" v-show="sc_lianx">
					<view v-for="(item,index) in sc_lianx" :key="index">
						<u-cell-item icon="tags-fill" @click='u_sc_go' :index="item.title" :title="item.title"
							:icon-style="{color:'#fff'}" :title-style="{color:'#fff'}"></u-cell-item>
					</view>
				</u-cell-group>
			</view>
		</u-mask>



	</view>
</template>

<script>
	export default {

		data() {
			return {
				statusBarH: this.StatusBar,
				customBarH: this.CustomBar,
				//搜索下拉框和这招是否显示
				scMaask: false,
				// 搜素框设置
				sc: {
					// 导航栏背景颜色
					navBackground: 'background-color:rgba(220,38,38,0.2)',
					//搜索框的的绑定值
					sckey: '',
					showAction: true,
					animation: true,
					margin: "0px 24rpx",
					youStyle: {
						color: "rgb(242, 242, 242)"
					}
				},
				// 联网返回的搜素联想
				sc_lianx: [],
				// 本地搜索记录
				searchHistory: [],
				// 轮播图列表
				swiper_list: ["https://img3.doubanio.com/view/photo/l/public/p2654893190.webp",
					"https://img9.doubanio.com/view/photo/m/public/p2661933476.webp",
					"https://img1.doubanio.com/view/photo/m/public/p2657858079.webp"
				]
			}
		},
		onLoad() {

		},
		onShow() {
			this.searchHistory = uni.getStorageSync("searchHistory")
		},
		methods: {

			// 搜索框远程获取联想
			u_sc_lianxiang(e) {
				if (e.length > 0) {
					console.log("搜索框输入的内容是:" + e)
					this.sc_lianx = [{
						title: "龙腾虎跃"
					}, {
						title: "龙争虎斗ssss"
					}, {
						title: "亢龙有悔是利空打击"
					}]
				} else {
					this.sc_lianx = []
				}
			},
			// 去搜索
			u_sc_go(e) {
				if (e.length > 0) {
					console.log("要搜索的内容:" + e)
					// TODO:跳转到搜索结果页面
					uni.navigateTo({
						url: "../search/search?title=" + e,

					})
				}
			},
			// 点击搜索框遮罩层
			sc_mask() {
				this.scMaask = false
			},

		},
		created() {}

	}
</script>

<style lang="scss">

	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1
			/* 如果您想让slot内容与导航栏左右有空隙 */
			// padding: 0 30rpx;
	}

	.search {
		z-index: 999;
	}

	.sc-pop {
		color: #FFFFFF;
		// background-color: #007AFF;
		width: 100%;
		// z-index: 999;

		.u-font-xl {
			margin-top: 10rpx;
		}

		.u-font-sm {
			margin-top: 10px;
			display: inline-flex;
			flex-direction: row;
			flex-wrap: wrap;

			.tag {
				margin: 6rpx 10rpx;
			}
		}
	}

	.hot {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		color: #eacda3;
		padding: 10rpx;

		image {
			width: 100rpx;
		}
	}

	.hotCars {
		// margin-top: 4px;
		display: flex;
		flex-wrap: wrap;

		.tags {
			/* margin: 100px auto auto 100px; */
			margin: 10rpx;
			margin-left: 20rpx;
			width: 216rpx;
			border-radius: 10px;

			// image {
			// 	width: 216rpx;
			// 	border-radius: 10px;
			// }

			.title {
				display: block;
				text-align: center;
				color: #F1F1F1;
			}

		}

		.tags:before {
			position: absolute;
			top: 10px;
			left: -8px;
			z-index: 1;
			padding-right: 10px;
			color: #ffffff;
			height: 0px;
			font-size: 20rpx;
			line-height: 0px;
			border: #0055ff 10px solid;
			border-right-color: transparent;
			/* content: "图撒旦士大夫是片"; */
			content: attr(data-content);
			box-shadow: -0px 5px 5px -5px #000;
		}

		/* 	.tags:after {
				content: "";
				position: absolute;
				top: 35px;
				left: -8px;
				border: #89540c 4px solid;
				border-left-color: transparent;
				border-bottom-color: transparent;
			} */
	}
</style>
